<template>
    <div :class="{ logo: true, collapsed: collapsed, uncollapsed: !collapsed }" @click="goHome">
        <img :src="collapsed ? Icon : Logo" alt="LOGO" />
    </div>
    <div class="wrap-menu">
        <v3scroll breadth="2" :resize-object="true">
            <a-menu v-model:selected-keys="menu.selectedKeys" :open-keys="menu.openKeys" mode="inline" theme="dark" @select="onSelect" @open-change="onOpenChange">
                <menu-item v-for="item in treeList" :key="item.id" :item="item" />
            </a-menu>
        </v3scroll>
    </div>
</template>
<script setup>
import { computed, inject, onMounted, reactive, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { usePermissionStore } from '@iframe/tools/store'
import TreeUtils from '@iframe/tools/utils/TreeUtils'
import MenuItem from './MenuItem'
import clone from 'clone'
import MenuUtils from '/@/utils/MenuUtils.js'
import Icon from '/@/assets/image/layouts/icon.png'
import Logo from '/@/assets/image/layouts/logo.png'

const permissionStore = usePermissionStore()
const { getMenu } = storeToRefs(permissionStore)

const router = useRouter()
const route = useRoute()
const collapsed = inject('collapsed')

const menu = reactive({
    selectedKeys: [],
    openKeys: []
})

const treeList = computed(() => {
    const menuList = clone(getMenu.value.filter(item => item.isHidden === 1))
    return TreeUtils.generateTreeData(menuList)
})

const onSelect = select => {
    menu.selectedKeys = [select.key]
    router.push(select.key)
}
const onOpenChange = openKeys => {
    if (menu.openKeys.length < openKeys.length) {
        menu.openKeys = TreeUtils.getRootPath(treeList.value, openKeys[openKeys.length - 1])
    }
}
const goHome = () => {
    router.push(`${import.meta.env.IFRAME_HOME_URL}`)
}

onMounted(() => {
    initMenuData()
})

const initMenuData = () => {
    const url = route.path
    if (treeList.value && treeList.value.length > 0) {
        menu.openKeys = MenuUtils.getUrlPath(treeList.value, url) || []
        const item = MenuUtils.getTreeNode(treeList.value, url)
        menu.selectedKeys = item ? [item.url] : []
    }
}
watch(
    () => route.path,
    () => {
        initMenuData()
    }
)
</script>
<style lang="less" scoped>
.logo {
    height: 64px;
    background: #4764e6;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.collapsed {
    width: 80px;
}

.uncollapsed {
    width: 200px;
}
.wrap-menu {
    :deep(.ant-menu-dark) {
        background: #4764e6;
    }
    :deep(.ant-menu-sub) {
        background: #4764e6 !important;
    }
    :deep(.ant-menu-title-content) {
        color: #fff;
        font-weight: bold;
    }
    :deep(.ant-menu-item) svg path {
        fill: #fff;
    }
    :deep(.ant-menu-submenu-title) svg path {
        fill: #fff;
    }
    :deep(.ant-menu-item-selected) {
        background: #fff;
    }
    :deep(.ant-menu-item-selected) .ant-menu-title-content {
        color: #4764e6 !important;
    }
    :deep(.ant-menu-item-selected) svg path {
        fill: #4764e6 !important;
    }
}
</style>
<style lang="less">
.ant-menu-dark.ant-menu-submenu > .ant-menu {
    background: #4764e6;
    color: #fff;
}
.ant-tooltip .ant-tooltip-arrow:before {
    background: #4764e6 !important;
}
.ant-tooltip .ant-tooltip-inner {
    background: #4764e6 !important;
}
</style>
